$letterW: 20px;
.tab-highresolution{
  .highresolution-content{
    padding: 15px;
    @media (min-width: 1500px){
      padding: 20px;
    }
    h2 {
      font-size: 21px;
      padding: 0 0 15px;
      text-align: center;
    }
    // Select box
    .select-box{
      .chzn-container-single{
        margin: 0 0 5px;
        &:last-child{
          margin: 0;
        }
      }
      .country-ul-mobile{
        margin: 0 -15px;
        >li{
          padding: 10px 20px;
          border-bottom: 1px solid $border;
          font-size: 14px;
          &:last-child{
            border-bottom: none;
          }
        }
      }
      .letters-ul-mobile-box{
        position: relative;
        margin: -15px -15px 0;
        border-bottom: 1px solid $border;
        &:before,&:after{
          content: "";
          position: absolute;
          top: 0;
          width: 15px;
          height: 100%;
        }
        &:before{
          left: 0;
          @include gradient(left,rgba(255,255,255,1),rgba(255,255,255,0));
        }
        &:after{
          right: 0;
          @include gradient(right,rgba(255,255,255,1),rgba(255,255,255,0));
        }
        .scroll-none{
          overflow: auto;
          padding: 15px 0 13px;
        }
        .letters-ul-mobile{
          width: 27.5 * $letterW;
          padding: 0px 15px;
          overflow: hidden;
          >li{
            float: left;
            color: $cGreen;
            width: $letterW;
            height: $letterW;
            line-height: $letterW;
            text-align: center;
            text-transform: uppercase;
            &.disabled{
              color: $dark;
              opacity: 0.75;
            }
            &.current{
              font-weight: 500;
            }
          }
        }
      }
    }
    .maptype,
    section {
      margin: 11px 0 0 0;
      > span {
        display: block;
        font-size: 11px;
        color: #999;
        text-transform: uppercase;
        padding: 7px 0;
        position: relative;
        .source {
          @extend .info-icon;
          display: inline-block;
          position: absolute;
          top: 4px;
          margin: 0 0 0 4px;
        }
      }
      h3 {
        display: inline;
      }
      .info-mapsource {
        display: inline-block;
        position: relative;
        top: -3px; 
      }
    }
    .onoffswitch {
      float: right;
      margin: 1px 0 0 6px;
      cursor: pointer;
    }
    .checked {
      background: #97bd3d;
    }
    .range-box{
      position: relative;
      height: 10px;
      width: 100%;
      margin: 0 auto;
      ul {
        display: flex;
        font-size: 10px;
        color: #97bd3d;
        font-weight: 500;
        justify-content: space-between;
        li {
            width: 15px;
            text-align: center;
        }
      }
      .dots{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 50%;
        @include transform(translate(-50%,0));
        margin: 1px 0 0;
        z-index: 1;
        background: image-url('/assets/icons/point.png') repeat-x 1px center;
      }
      .progress{
        position: absolute;
        top: 50%;
        left: 0;
        width: 30%;
        height: 4px;
        margin: -1px 0 0;
        cursor: pointer;
        background: $cGreen;
        border-radius: 2px;
        z-index: 2;
      }
    }

    .advanced-controls {
      cursor: pointer;
      &:after {
        content:'►';
        left: 133px;
        display: inline-block;
        position: absolute;
      }
      &.active:after {
        content: '▼';
      }
    }
    .advanced-options {
      display: none;
    }

    // RANGE INPUT
    input[type=range] {
      -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
      width: 100%; /* Specific width is required for Firefox. */
      margin: 0;
      z-index: 0;
      position: relative;
      z-index: 2;
      background: transparent;
    }

    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
    }

    input[type=range]:focus {
      outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
    }

    input[type=range]::-ms-track {
      width: 100%;
      cursor: pointer;
      background: transparent; /* Hides the slider so custom styles can be added */
      border-color: transparent;
      color: transparent;
    }






    // THUMB
    /* Special styling for WebKit/Blink */
    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      position: relative;
      height: 12px;
      width: 12px;
      margin: -3px 0 0 0;
      border-radius: 2px;
      background: $white;
      cursor: pointer;
      box-shadow: $shadow1;
      &:after{
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        @include transform(translate(-50%,-50%));
        width: 4px;
        height: 4px;
        background: $dark;
        border-radius: 50%;
      }
    }

    /* All the same stuff for Firefox */
    input[type=range]::-moz-range-thumb {
      position: relative;
      height: 12px;
      width: 12px;
      margin: -4px 0 0 0;
      border-radius: 2px;
      background: $white;
      cursor: pointer;
      box-shadow: $shadow1;
      &:after{
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        @include transform(translate(-50%,-50%));
        width: 4px;
        height: 4px;
        background: $dark;
        border-radius: 50%;
      }
    }

    /* All the same stuff for IE */
    input[type=range]::-ms-thumb {
      position: relative;
      height: 12px;
      width: 12px;
      margin: -4px 0 0 0;
      border-radius: 2px;
      background: $white;
      cursor: pointer;
      box-shadow: $shadow1;
      &:after{
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        @include transform(translate(-50%,-50%));
        width: 4px;
        height: 4px;
        background: $dark;
        border-radius: 50%;
      }
    }








    //TRACK
    input[type=range]::-webkit-slider-runnable-track {
      width: 100%;
      height: 10px;
      cursor: pointer;
      background: transparent;
      position: relative;
      z-index: 5;
    }

    input[type=range]:focus::-webkit-slider-runnable-track {
      background: transparent;
    }

    input[type=range]::-moz-range-track {
      width: 100%;
      height: 10px;
      cursor: pointer;
      background: transparent;
      position: relative;
      z-index: 5;
    }

    input[type=range]::-ms-track {
      width: 100%;
      height: 10px;
      cursor: pointer;
      background: transparent;
      position: relative;
      z-index: 5;
    }


    input[type=range]::-ms-fill-lower {
      background: #2a6495;
      border: 0.2px solid #010101;
      border-radius: 2.6px;
      box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    }
    input[type=range]:focus::-ms-fill-lower {
      background: #3071a9;
    }

    input[type=range]::-ms-fill-upper {
      background: #3071a9;
      border: 0.2px solid #010101;
      border-radius: 2.6px;
      box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    }
    input[type=range]:focus::-ms-fill-upper {
      background: #367ebd;
    }
  }
}
